<%@ page import="java.io.IOException" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="icom.icss.utils.JDBCUtils" %>
<%@ page import="java.sql.SQLException" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>海尔官网|注册页面</title>
    <link rel="shortcut icon" href="#"/>
    <!-- 注册页面 -->

    <!-- 加载BootStrap样式文件-->
    <link type="text/css" rel="stylesheet" href="./css/bootstrap.css"/>
    <!-- 链接注册的css样式文件 -->
    <link type="text/css" rel="stylesheet" href="css/sign_in.css"/>
    <!-- 加载jQuery类库-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 加载BootStrap脚本-->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <!-- 注册下JavaScript -->
    <script type="text/javascript">
        $(function () {
            // 账号
            $("#account").blur(function () {
                    var username= $(this).val().trim();
                   $.ajax({
                       type:'GET',
                       url:'checkUsername?username=' +username,
                       success:function(data) {

                           if(data.checkUsername){
                               $("#account_warning").html("*用户名已有!").css("color", "#FFC0CB");
                               $("#account").focus();
                               return;
                           }
                       },
                        dataType: 'json'
                   });
                //判断如果文本框的长度为空，则将文本框边框改为#FFC0CB
                if ($.trim($(this).val()).length == 0) {
                    //动态添加一个类样式
                    $(this).addClass("warning");
                    //
                    $("#account_warning").html("*账号不可为空!").css("color", "#FFC0CB");
                } else {
                    $(this).removeClass("warning");
                    $("#account_warning").html("");
                }
            });

            /**密码*/
            $("#password").blur(function () {
                //判断如果文本框的长度为空，则将文本框边框改为#FFC0CB
                if ($.trim($(this).val()).length < 6 || $.trim($(this).val()).length > 12) {
                    //动态添加一个类样式
                    $(this).addClass("warning");
                    //
                    $("#password_warning").html("*密码不符合规范！").css("color", "#FFC0CB");
                } else {
                    $(this).removeClass("warning");
                    $("#password_warning").html("");
                }
            });
            //Emile
            $("#email").blur(function() {
            	//判断如果文本框的长度为空，则将文本框边框改为#FFC0CB
            	if ($.trim($(this).val()).length != 0) {
            		// 获取email中val的值,判断是否包含'@'和'.'并且只能包含一个
            		if ($("#email").val().indexOf('.') != -1 && $("#email").val().indexOf('@') != -1) {

            			$(this).removeClass("warning");
            			$("#email_warning").html("");

            		} else {
            			// 若不为空且不包含@和.,则显示
            			$(this).addClass("warning");
            			//不符合要求
            			$("#email_warning").html("*亲请按要求呦！").css("color", "#FFC0CB");
            		}
            	} else {
            		$(this).addClass("warning");
            		//为空时
            		$("#email_warning").html("*邮箱不可为空!").css("color", "#FFC0CB");

            	}
            });

            //手机
            $("#tel").blur(function() {
            	//判断手机是否符合要求 否则 #FFC0CB
            	if ($.trim($(this).val()).length == 0 || $.trim($(this).val()).length != 11) {
            		//动态添加一个类样式
            		$(this).addClass("warning");
            		$("#tel_warning").html("*亲请按要求呦！").css("color", "#FFC0CB");
            	} else {
            		$(this).removeClass("warning");
            		$("#tel_warning").html("");
            	}
            });
        });

    </script>


</head>
<body class="bg_sign">
<div class="container">
    <!-- <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center sign_top -50px">用户注册</h2>
            <h2 class="text-right"><small>已有帐号,<a href="javascript:void(0);" data-toggle="modal" data-target="#login_model">登录</a></small></h2>
        </div> -->
    <div class="row">
        <div class="col-md-6 col-lg-offset-3" style="text-align: center;">
            <nav class="navbar navbar-default navbar-fixed-top" style="padding-top:10px;">
                <div class="container">
                    <div class="row">
                        <div class="col-md-2" style="padding-bottom: 0px;">
                            <a href="index.jsp"><img src="img/haier2020_logo.webp" style="height: 60px;"><span></a>
                        </div>
                        <div class="col-md-2" style="padding: 10px;">
                            <p style="font-size: 20px;padding-top: 5px;" class="navigation">账号注册</p>
                        </div>
                        <div id="headtext" class="col-md-offset-5 col-md-3">
                            <p style="padding-top: 20px; "><span>什么已经是老用户了？</span><a href="log_in.jsp">点击登录</a></p>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2"
                 style="margin-top:150px;border-radius: 10px; padding:100px;background-color: rgba(255,255,255,0.5);">
                <form class="form-horizontal" style="padding: 50px;" action="jdbc" method="post">
                    <h1 class="text-center"
                        style=" margin-top: 20px; padding: 10px; font-size: 50px; font-weight:bold; color: rgba(255,255,255,0.8)  ">
                        海尔集团</h1>
                    <div class="control-group">
                        <label class="control-label" for="account">账号</label>
                        <div class="controls">
                            <input type="text" name="username" id="account" placeholder="请输入的你的账号亲!" required="required"
                                   style="width: 300px; height: 30px;">
                            <span id="account_warning" class="warning_txt"> </span>
                            <span class="checkUsername"></span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="email">Email</label>
                        <div class="controls">
<%--                            &lt;!&ndash;--%>
<%--                            pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"--%>
<%--                            &ndash;&gt;--%>
                            <input type="text" id="email" placeholder="Email也给我来一个吧"
                                   style="width: 300px; height: 30px;">
                            <span id="email_warning" class="warning_txt"> </span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="tel">手机号</label>
                        <div class="controls">
<%--                            &lt;!&ndash; pattern="/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/" &ndash;&gt;--%>
                            <input type="text" id="tel" placeholder="请输入您的手机号!" required="required"
                                   style="width: 300px; height: 30px;">
                            <span id="tel_warning" class="warning_txt"> </span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="password">密码</label>
                        <div class="controls">
                            <input type="password" name="password" id="password" placeholder="密码大于6位,小于12位 "
                                   style="width: 300px; height: 30px;">
                            <span id="password_warning" class="warning_txt"> </span>
                        </div>
                    </div>
                    <div class="control-group row">
                        <div class="controls col-md-10">
                            <button type="submit" id="register" class="btn btn-danger text-center"
                                    style="width:100%;height:45px;letter-spacing: 50px;font-size:18px; margin-top: 50px;">
                                注册
                            </button>
                        </div>
                    </div>
                </form>
                <%
                    String registerInfo = (String) request.getAttribute("registerInfo");
                    if (registerInfo != null) {
                    out.print("注册失败");
                }
                %>
            </div>

        </div>

    </div>

    <!-- 底部版权 -->
    <div class="container-fluid">
        <div class="row footer_1">
            <div class="col-md-6 footer_font" align="center">
                <a href="https://www.haier.com/about_haier/jtjj/">关于海尔</a>
                &nbsp;|&nbsp;
                <a href="https://www.haier.com/contact/">联系我们</a>
                &nbsp;|&nbsp;
                <a href="https://www.haier.com/cn/terms_conditions/">法律声明</a>
                &nbsp;|&nbsp;
                <a href="https://www.haier.com/help/">帮助中心</a>
                &nbsp;|&nbsp;
                <a href="https://www.haier.com/store.shtml">海尔门店</a>
            </div>
            <div class="col-md-6" align="center">
                <span>鲁ICP备09096283</span><span>Copyright 2020 海尔集团 版权所有</span>
            </div>
        </div>
    </div>
</div>

</body>
</html>
